/*
 * @Description: Have A Nice Day!
 * @Author: Jacky
 * @Date: 2020-02-13 14:32:51
 * @LastEditors  : Jacky
 * @LastEditTime : 2020-02-13 16:13:03
 */
import React,{useEffect, useRef, useState}  from 'react'
import Row from './row'
import styles from "./index.module.css";
import {connect} from 'react-redux'
function ChinaEpidemic(props) {
    let [stickyBarStyle, setStickyBarStyle] = useState({});
    let [dataTableHeight, setDataTableHeight] = useState(0)
    let stickyBar = useRef();
    let dataTableNode = useRef();
    let {chinaData} = props

    useEffect(()=>{
        let stickyTop = stickyBar.current.offsetTop
        window.addEventListener('scroll',()=>{
            let st = document.documentElement.scrollTop
            if(st > stickyTop && st < dataTableHeight){
                setStickyBarStyle({position:"fixed", top:"96px", zIndex:"999"})
            }else{
                setStickyBarStyle({})
            }
        })
    }, [dataTableHeight])

    useEffect(()=>{
        if(chinaData.length>0){
            setDataTableHeight(dataTableNode.current.offsetHeight+dataTableNode.current.offsetTop)
        }
    },[chinaData])
    
    return (
        <div>
            <div className="title">中国疫情</div>
            <div className="sub-title">7:00-10:00为更新高峰，数据如有滞后请谅解。</div>
            <div className="data-table">
                <div className={styles["data-table-head"]+" "+styles['row']} ref={stickyBar} style={stickyBarStyle}>
                    <span className={styles['highlight']}>地区</span>
                    <span className={styles['highlight']}>新增确诊</span>
                    <span>累计确诊</span>
                    <span>治愈</span>
                    <span>死亡</span>
                    <span>病死率</span>
                </div>
                <div className="data-table-list" ref={dataTableNode}>
                    {
                        chinaData.map((item, index)=><Row key={'row'+index} data={item}></Row>)
                    }
                </div>
            </div>
        </div>
    )
}

export default connect(state=>{
    return {
        chinaData: state.areaTree[0]?state.areaTree[0].children:[]
    }
})(ChinaEpidemic)
